<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-submenu.css" />

    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-submenu.js"></script>

    <style type="text/css">
        .popover { min-width: 150px; }
        .error { border: 1px red dashed; }
        label.error { border: none; color: red; position: absolute; top: 8px; right: 25px; }
    </style>
</head>
<body>
    <div id="main" class="container" style="padding-top: 50px;">

        <div class="row">
            <div id="tipBody" class="col-xs-6 col-xs-offset-3">


                <div class="panel panel-default">
                    <div class="panel-body">
                        <form id="form1" method="POST" action="dd.php" class="form-horizontal">

                            <div class="form-group">
                                <label for="userName" class="col-sm-3 control-label">用户名：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名" data-toggle="tooltip" data-placement="top" title="请输入8 ~ 16位的用户名！">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="pwd" class="col-sm-3 control-label">密码：</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
                                </div>
                            </div>
                            

                            <div class="form-group">

                                <div class="col-sm-8 col-sm-offset-3">
                                    <button class="btn btn-default" type="button" id="btn">登录</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
        </div>


    </div>


<div class="dropdown m-b">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-submenu>
    Dropdown <span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    <li><a tabindex="0">Action</a></li>
    <li class="dropdown-submenu">
      <a tabindex="0">Another action</a>

      <ul class="dropdown-menu">
        <li class="dropdown-header">Dropdown header</li>
        <li><a tabindex="0">Sub action</a></li>
        <li class="disabled"><a tabindex="0">Another sub action</a></li>
        <li><a tabindex="0">Something else here</a></li>
      </ul>
    </li>
    <li><a tabindex="0">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="0">Separated link</a></li>
  </ul>

</div>

    



    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/messages_zh.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
    
        $(function () {

            $('[data-submenu]').submenupicker();

            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();

            $("#form1").validate({
                rules: {
                    userName: {
                        required: true
                    },
                    pwd: {
                        required: true
                    }
                },
                messages: {
                    userName: {
                        required: "用户名不能为空"
                    },
                    pwd: "密码不能为空",
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });


            $('#btn').click(function () {
                //$("#form1").submit();
                var isOk=$('#form1').valid();
                if(isOk){
                    login();
                }
            });

            function login(){
                $.post('login.php',$('#form1').serialize(),function(o){
                    o=JSON.parse(o);
                    if(o.success){
                        main();
                        return;
                    }
                    $('#tipBody').append('<div class="alert alert-warning alert-dismissible" role="alert">  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> '+o.msg+'</div>');
                });
            }

            function main(){
                $('#main').load('main.php #content',function(){

                });
            }

        });
    </script>



</body>
</html>